
<template>
  <view class="favorite-page">
    <view v-if="favorites.length === 0" class="empty-tip">
      <text>暂无收藏</text>
    </view>
    <view v-else class="favorite-list">
      <view 
        v-for="(item, index) in favorites" 
        :key="index" 
        class="favorite-item"
      >
        <image class="product-image" :src="item.cover" mode="aspectFill" @click='toDetail(item.id)'></image>
        <view class="product-info" @click='toDetail(item.id)'>
          <text class="product-name">{{item.name}}</text>
          <text class="product-type">{{item.category.__toString}}</text>
          <text class="product-price">¥{{item.price}}</text>
        </view>
        <button class="cancel-btn" @click="cancelFavorite(index)">
          取消收藏
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      favorites: []
    }
  },
  onShow(){
	  let favoriteIds = uni.getStorageSync('likeIds')
	  if(favoriteIds !== ''){
		  uni.showLoading()
		  this.request.get(`api/products`,{
			  '@filter': `entity.getId() in [${favoriteIds.toString()}]`
		  }).then((res) => {
			  this.favorites = res.data
			  uni.hideLoading()
		  })
	  }
  },
  methods: {
    cancelFavorite(index) {
      uni.showModal({
        title: '提示',
        content: '确定要取消收藏这款产品吗？',
        success: (res) => {
          if (res.confirm) {
            this.favorites.splice(index, 1)
			let favoriteIds = []
			for(let i of this.favorites){
				favoriteIds.push(i.id)
			}
			uni.setStorageSync('likeIds',favoriteIds)
            uni.showToast({
              title: '已取消收藏',
              icon: 'none'
            })
          }
        }
      })
    },
	toDetail(id){
		uni.navigateTo({
			url: `/pages/product/detail?id=${id}`
		})
	}
  }
}
</script>

<style>
.favorite-page {
  padding: 20rpx;
  min-height: 100vh;
  background-color: #262f27;
}
.empty-tip {
  text-align: center;
  margin-top: 200rpx;
  color: #ffd591;
}
.favorite-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 30rpx;
  padding: 20rpx;
  border-radius: 16rpx;
  background-color: #262f27;
  border: 1px solid #ffd591;
}
.product-image {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}
.product-info {
  margin-bottom: 20rpx;
}
.product-name {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
  color: #ffd591;
}
.product-type {
  font-size: 24rpx;
  display: block;
  margin-bottom: 15rpx;
  color: rgba(255, 213, 145, 0.7);
}
.product-price {
  font-size: 36rpx;
  font-weight: bold;
  color: #ffd591;
}
.cancel-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  margin-top: 10rpx;
  border: none;
  background-color: #ffd591;
  color: #262f27;
}
</style>
